<template>
	<view class="tab-page">
		<view v-if="loading" class="chat-loading">
			<loading :size="50" :mask="false">
				<view>消息接收中...</view>
			</loading>
		</view>

		<view class="tabegr">
			<view class="lest">
				<view class="etagw " v-for="(item,index) in tablist" :key="index"
					:class=" tadouble ==index?'active':'' " @click="changtab(index)">
					{{item}}
				</view>

			</view>
			<view class="adijd" @click="onAddNewFriends">
				添加好友
			</view>
		</view>


		<view class="nav-bar" v-if="tadouble==0">
			<view class="nav-search">
				<uni-search-bar v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar>
			</view>

		</view>
		<view class="chat-tip" v-if="!loading && chatStore.chats.length==0 && tadouble==0">
			温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
		</view>
		<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true" v-if="tadouble==0">
			<view v-for="(chat,index) in chatStore.chats" :key="index">
				<pop-menu v-if="isShowChat(chat)" :items="menu.items" @select="onSelectMenu($event,index)">
					<chat-item :chat="chat" :index="index" :active="menu.chatIdx==index">
					</chat-item>
				</pop-menu>
			</view>
		</scroll-view>

		<!-- 通讯录 -->
		<view class="" v-if="tadouble==1">
			<freied></freied>

		</view>



		<view class="footer">
			<view class="mainbotm">
				<view class="onehome acti" @click="goabbar(0)">
					<image src="/static/datab/00.png" mode=""></image>
					<view class="teben">
						聊天
					</view>
				</view>
				<view class="onehome oenmy" @click="goabbar(1)">
					<image src="/static/datab/1.png" mode=""></image>
					<!-- 	<view class="teben">
						首页
					</view> -->
				</view>
				<view class="onehome oenmy" @click="goabbar(2)">
					<image src="/static/datab/2.png" mode=""></image>
					<!-- 	<view class="teben">
						首页
					</view> -->
				</view>
				<view class="onehome  oenmy" @click="goabbar(3)">
					<image src="/static/datab/4.png" mode=""></image>
					<!-- 	<view class="teben">
						我的
					</view> -->
				</view>
			</view>
		</view>
	
	
	</view>
</template>

<script>
	import useChatStore from '@/store/chatStore.js'
	import freied from '../friend/friend.vue'

	export default {
		data() {
			return {
				tadouble: 0,
				tablist: ['聊天', '通讯录'],
				searchText: "",
				menu: {
					show: false,
					style: "",
					chatIdx: -1,
					isTouchMove: false,
					items: [{
							key: 'DELETE',
							name: '删除该聊天',
							icon: 'trash',
							color: '#e64e4e'
						},
						{
							key: 'TOP',
							name: '置顶该聊天',
							icon: 'arrow-up'
						}
					]
				}
			}
		},
		onReady() {
			// 隐藏TabBar
			uni.hideTabBar();
		},
		components: {
			freied
		},
		methods: {
			// 添加好友
			onAddNewFriends() {
				uni.navigateTo({
					url: "/pages/friend/friend-add"
				})
			},
			changtab(i) {
				this.tadouble = i
			},
			goabbar(i) {
				switch (i) {
					case 0:
						// uni.navigateTo({
						// 	url: '/pages/home/index'
						// })
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/newtreds/index'
						})
						// uni.switchTab({
						// 	url: '/pages/friend/friend'
						// })
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/play/index'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/mine/mine'
						})

						break;

				}
			},
			onSelectMenu(item, chatIdx) {
				switch (item.key) {
					case 'DELETE':
						this.removeChat(chatIdx);
						break;
					case 'TOP':
						this.moveToTop(chatIdx);
						break;
					default:
						break;
				}
				this.menu.show = false;
			},
			removeChat(chatIdx) {
				this.chatStore.removeChat(chatIdx);
			},
			moveToTop(chatIdx) {
				this.chatStore.moveTop(chatIdx);
			},
			isShowChat(chat) {
				if (chat.delete) {
					return false;
				}
				return !this.searchText || chat.showName.includes(this.searchText)
			},
			refreshUnreadBadge() {
				if (this.unreadCount > 0) {
					uni.setTabBarBadge({
						index: 0,
						text: this.unreadCount + ""
					})
				} else {
					uni.removeTabBarBadge({
						index: 0,
						complete: () => {}
					})
				}
				// Android平台调用原生API设置角标
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform === 'android') {
					plus.runtime.setBadgeNumber(this.unreadCount);
				}
				// #endif
			}
		},
		computed: {
			unreadCount() {
				let count = 0;
				this.chatStore.chats.forEach(chat => {
					if (!chat.delete) {
						count += chat.unreadCount;
					}
				})
				return count;
			},
			loading() {
				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
			}
		},
		watch: {
			unreadCount(newCount, oldCount) {
				this.refreshUnreadBadge();
			}
		},
		onShow() {
			this.refreshUnreadBadge();
		}
	}
</script>

<style scoped lang="scss">
	.adijd {
		color: #FB75D6;
		font-size: 28rpx;
	}

	.lest {
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.active {

		color: #2A222F !important;
		font-size: 48rpx !important;

		position: relative;
		display: inline-block;
	}

	.active::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		/* 调整此值以改变下划线与文本之间的距离 */
		left: 50%;
		/* 将起点设为文本的中间 */
		width: 50%;
		/* 根据实际需要调整宽度，这里是相对于文本容器的宽度 */
		height: 8rpx;
		/* 下划线的厚度 */
		border-radius: 50rpx;
		background: #FB75D6;
		/* 下划线的颜色 */
		transform: translateX(-50%);
		/* 将下划线向左移动其自身宽度的一半，使其居中 */
	}

	.etagw {
		margin-right: 40rpx;
		color: #2A222F;
		font-size: 32rpx;
	}

	.tabegr {
		padding: 30rpx 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	page {
		width: 100%;
		height: 100vh;
		background: url('@/static/dazi/bgh.png') no-repeat;
		background-size: 100% 100%;
	}

	// 高亮选择
	.acti {
		background: rgba(248, 239, 249, 1);
		height: 75%;
		padding: 0 50rpx;
		border-radius: 100rpx;

	}

	.mainbotm {
		height: 128rpx;
		// margin: 0 40rpx 40rpx;
		padding: 0 30rpx 30rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		box-shadow: 0px 6px 16px 0px #21465414;


		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.oenmy {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 96rpx;
		vertical-align: middle;
		border-radius: 50%;
		// background-color: #f7f8fa;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		// background-color: rgba(255, 255, 255, );
		// height: 200rpx;

		backdrop-filter: blur(4rpx);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, .1) -30%, rgba(255, 255, 255, .1) 50%);
		// padding: 20rpx;



		// backdrop-filter: blur(6px);
		//     background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) -30%, rgba(255 ,255, 255, .5) 50%);

	}

	.onehome {
		display: flex;
		align-items: center;

		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.teben {
			margin-left: 10rpx;
			color: rgba(251, 117, 214, 1);
			font-size: 28rpx;
			font-weight: bold;
		}
	}



	.tab-page {
		position: relative;
		// border: #dddddd solid 1px;
		display: flex;
		flex-direction: column;


		.nav-bar {
			margin-top: 14rpx;
			padding: 2rpx 0;
			display: flex;
			align-items: center;
			// background-color: white;

			height: 110rpx;

			.nav-search {
				flex: 1;
				height: 110rpx;
			}


		}

		.chat-tip {
			position: absolute;
			top: 400rpx;
			padding: 50rpx;
			line-height: 50rpx;
			text-align: left;
			color: #10AEFF;
			font-size: 30rpx;
		}

		.chat-loading {
			display: block;
			width: 100%;
			height: 120rpx;
			background: white;
			position: fixed;
			top: 0;
			z-index: 999;
			color: #10AEFF;
			;

			.loading-box {
				position: relative;

			}
		}

		.scroll-bar {
			width: 96%;
			margin: 20rpx auto;
			flex: 1;
			height: 100%;
		}
	}
</style>